<template>
	<div align="center" style="width: 1800px;">
		<div align="left" style="width: 1370px;">
			<el-input v-model="title" placeholder="请输入专题标题" style="width:300px"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<el-input v-model="subtitle" placeholder="请输入专题子标题" style="width:300px"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<!--<el-select v-model="type" placeholder="请选择优惠券类型">
				<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>&nbsp;&nbsp;&nbsp;&nbsp;
			<el-select v-model="status" placeholder="请选择优惠券状态">
				<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>&nbsp;&nbsp;&nbsp;&nbsp; -->
			<el-button @click="list()" type="primary" size="small">查询</el-button>
			<div align="right" style="width: 1370px;">

				<el-button type="primary" @click="addBean" size="small">添加</el-button>
				<el-button type="danger" @click="ps" size="small">批量删除</el-button>
			</div>

		</div><br />

		<el-table :data="topicList" border style="width: 77%" @selection-change="change">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column prop="title" label="专题标题" width="190"></el-table-column>
			<el-table-column prop="subtitle" label="专题子标题" width="300"></el-table-column>
			<el-table-column prop="picUrl" label="专题图片" width="170">
				<template slot-scope="scope">
					<img :src="scope.row.picUrl" min-width="100" width="100%" height="70" />
				</template>
				<!-- 'http://localhost:8085/downLoad?fileName='+ -->
			</el-table-column>
			<el-table-column label="专题详情" width="150">
				<template slot-scope="scope">
					<el-button @click="look(scope.row)" type="primary" size="small">查看</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="price" label="低价" width="150"></el-table-column>
			<el-table-column prop="readCount" label="专题阅读量" width="150"></el-table-column>
			<el-table-column fixed="right" label="操作" width="250">
				<template slot-scope="scope">
					<el-button @click="upd(scope.row)" type="primary">编辑</el-button>
					<el-button @click="del(scope.row)" type="danger">删除</el-button>
				</template>
			</el-table-column>
		</el-table><br /><br />
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pages"
		:page-sizes="[1, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
		<!--分页插件-->
		<!-- <el-pagination @current-change="list" :current-page="pagination.pageNum" :page-count="pagination.pages">
    </el-pagination>-->
		<!-- 分页结束 -->

		<el-dialog title="专题详情" :visible.sync="lookFlag">
			<el-form :model="form">
				<!-- <el-form-item  :label-width="formLabelWidth" prop="question"> -->
				<!-- <el-input v-model="form.name" autocomplete="off" style="width:300px"></el-input> -->
				<img :src="baseUrl + form.content" width="100%" height="100%" />
				<!-- </el-form-item> -->
			</el-form>
		</el-dialog>

		<!-- 添加对话框 -->
		<el-dialog title="添加" :visible.sync="addFlag">
			<el-form :model="form">
				<el-form-item label="专题标题" :label-width="formLabelWidth" prop="question">
					<el-input v-model="form.title" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="专题子标题" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.subtitle" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="专题图片" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.picUrl" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="专题详情" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.content" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="低价" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.price" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="专题阅读量" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.readCount" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addFlag = false">取 消</el-button>
				<el-button type="primary" @click="add()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 添加结束 -->

		<!-- 查看对话框 -->
		<!-- 		<el-dialog title="查看" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="优惠券名称" :label-width="formLabelWidth" prop="question" readonly>
					<el-input v-model="form.name" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
				<el-form-item label="介绍" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.desc" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
				<el-form-item label="标签" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.tag" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
				<el-form-item label="最低消费" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.min" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
				<el-form-item label="满减金额" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.discount" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
				<el-form-item label="每人限领" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.limit" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
				<el-form-item label="商品使用范围" :label-width="formLabelWidth" prop="answer">
					<el-select v-model="form.goodsType" placeholder="请选择" disabled>
						<el-option v-for="item in goodsTypeList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="优惠券类型" :label-width="formLabelWidth" prop="answer">
					<el-select v-model="form.type" placeholder="请选择" disabled>
						<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="优惠券数量" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.total" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
				<el-form-item label="状态" :label-width="formLabelWidth" prop="answer">
					<el-select v-model="form.status" placeholder="请选择" disabled>
						<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="创建时间" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.addTime" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
				<el-form-item label="修改时间" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.updateTime" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
			</div>
		</el-dialog> -->
		<!-- 修改对话框 -->
		<el-dialog title="修改" :visible.sync="updFlag">
			<el-form :model="form">
				<el-form-item label="专题标题" :label-width="formLabelWidth" prop="question">
					<el-input v-model="form.title" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="专题子标题" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.subtitle" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="专题图片" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.picUrl" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="专题详情" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.content" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="低价" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.price" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="专题阅读量" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.readCount" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="updFlag = false">取 消</el-button>
				<el-button type="primary" @click="update()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 修改 -->
	</div>
</template>

<script>
	import axios from "axios";
	var quan;
	var data4Vue = {
		topicList: [],
		total: 0,
		pages: 1,
		pageSize: 5,
		title: "",
		subtitle: "",
		lookFlag: false,
		formLabelWidth: '120px',
		form: {},
		addFlag: false,
		updFlag: false,
		delChange: [],
		// typeList: [{
		// 		value: "0",
		// 		label: "通用券，用户领取"
		// 	},
		// 	{
		// 		value: "1",
		// 		label: "注册赠券"
		// 	},
		// 	{
		// 		value: "2",
		// 		label: "优惠券码兑换"
		// 	}
		// ],
		// type: "",
		// status: "",
		// statusList: [{
		// 		value: "0",
		// 		label: "正常使用"
		// 	},
		// 	{
		// 		value: "1",
		// 		label: "过期"
		// 	},
		// 	{
		// 		value: "2",
		// 		label: "下架"
		// 	}
		// ],
		// goodsTypeList: [{
		// 		value: "0",
		// 		label: "全商品"
		// 	},
		// 	{
		// 		value: "1",
		// 		label: "类目限制"
		// 	},
		// 	{
		// 		value: "2",
		// 		label: "商品限制"
		// 	}
		// ],
		// goodsType: "",
		// dialogFormVisible: false,
		// 
		// 
		// updFlag: false,
		// addFlag: false
	};

	export default {
		name: "Topic",
		props: {
			msg: String
		},
		data: function() {
			return data4Vue;
		},
		mounted: function() {
			quan = this;
			this.list();
		},
		methods: {
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.list();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.pages = val;
				this.list();
			},
			list() {

				axios({
					method: "get",
					url: "http://localhost:8085/ecTopic/topicList",
					params: {
						pageNum: quan.pages,
						pageSize: quan.pageSize,
						title: quan.title,
						subtitle: quan.subtitle,
						// type: quan.type,
						// status: quan.status
					}
				}).then(function(res) {
					quan.topicList = res.data.obj.list;
					quan.total = res.data.obj.total;
					console.log(quan.topicList);
				});
			},
			look: function(bean) {
				axios.get("http://localhost:8085/ecTopic/getPic?id=" + bean.id).then(function(res) {
					quan.lookFlag = true;
					quan.form = res.data.obj;
				})
			},
			change: function(bean) {
				quan.delChenge = bean;
			},
			addBean: function() {
				quan.addFlag = true;
				for (var i in quan.form) {
					quan.form[i] = null;
				}
			},
			add: function() {
				axios.post("http://localhost:8085/ecTopic/addTopic", quan.form).then(function(res) {
					if (res.data.code == 200) {
						alert("添加成功");
						quan.addFlag = false;
						quan.list();
					} else {
						alert("添加失败");
					}
				})
			},
			upd: function(bean) {
				axios.get("http://localhost:8085/ecTopic/getTopic?id=" + bean.id).then(function(res) {
					quan.form = res.data.obj;
					quan.updFlag = true;
				})
			},
			update: function() {
				axios.post("http://localhost:8085/ecTopic/updTopic", quan.form).then(function(res) {
					if (res.data.code == 200) {
						alert("修改成功");
						quan.updFlag = false;
						quan.list();

					} else {
						alert("修改失败");
					}
				})
			},
			del: function(bean) {
				axios.get("http://localhost:8085/ecTopic/delTopic?id=" + bean.id).then(function(res) {
					if (res.data.code == 200) {
						alert("删除成功");
						quan.list();
					} else {
						alert("删除失败");
					}
				})
			},
			ps: function() {
				var ids = [];
				for (var i = 0; i < quan.delChange.length; i++) {
					var idd = quan.delChange[i].id;
					ids.push(idd);
				}
				axios.get("http://localhost:8085/ecTopic/delTopic?ids=" + ids).then(function(res) {
					if (res.data.code == 200) {
						alert("批删成功");
						quan.list();
					} else {
						alert("批删失败");
					}
				})
			}
			// look: function(bean) {
			// 	axios.get("http://localhost:1001/ecCoupon/getCoupon?id=" + bean.id).then(function(res) {
			// 		quan.form = res.data.obj;
			// 		quan.dialogFormVisible = true;
			// 	})
			// },
			// zt: function(bean) {
			// 	if (bean.status == 0) {
			// 		return "正常使用";
			// 	} else if (bean.status == 1) {
			// 		return "过期";
			// 	} else if (bean.status == 2) {
			// 		return "过期";
			// 	}
			// },
			// lx: function(bean) {
			// 	if (bean.type == 0) {
			// 		return "通用券，用户领取";
			// 	} else if (bean.type == 1) {
			// 		return "注册赠券";
			// 	} else if (bean.type == 2) {
			// 		return "优惠券码兑换";
			// 	}
			// },
			// fw: function(bean) {
			// 	if (bean.goodsType == 0) {
			// 		return "全商品";
			// 	} else if (bean.goodsType == 1) {
			// 		return "类目限制";
			// 	} else if (bean.goodsType == 2) {
			// 		return "商品限制";
			// 	}
			// },
		}
	};
</script>

<style>
</style>
